<template>
  <div class="box">
    <!-- 导航 -->
    <div class="title">
      <span class="el-icon-arrow-left" @click="$router.go(-1)"></span>
      消息通知
    </div>
    <!--  -->
    <div class="blac_list">
      <div class="rowWrapper message">
        <div class="colWrapper">
          <div>
            <span class="font-card">收到卡券</span>
          </div>
          <div>
            <span class="font-date">2021-03-06   16:23</span>
          </div>
        </div>
        <div class="arrowRight">
          <span class="el-icon-arrow-right" @click="$router.push({path:'/listCardDetail'})"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {index} from '@/api/merbership/coupon'

export default {
  name: 'cardDetail',
  data() {
    return {
      dataList: []
    }
  },
  mounted() {
    this.index()
  },
  methods: {
    /**
     * 我的卡券列表
     */
    index() {
      const pd = {}
      index(this.$qs.stringify(pd))
        .then(res => {
          this.dataList = res.data.data.data
        })
    }
  }
}
</script>

<style scoped>
.font-card {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-weight: bold;
}

.message {
  justify-content: space-between;
}

.box {
  width: 750px;
  height: 100vh;
  background-color: #f5f5f5;
}

.box {
  height: 100vh;
  background-color: #f5f5f5;
}

.title {
  background-color: #7ac91b;
  color: #fff;
  font-size: 18px;
  text-align: center;
  padding: 15px;
  font-weight: bold;
}

.title .el-icon-arrow-left {
  float: left;
  margin-top: 5px;
}

/*  */
.blac_list {
  margin: 0 10px;
}

.blac_list > div {
  /*color: #fff;*/
  margin: 10px 0;
  height: 50px;
  background-color: #fff;
  box-shadow: 0 7px 23px 1px rgba(180, 180, 180, 0.4);
  border-radius: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}

.blac_list > div img {
  width: 43px;
}

.blac_list > div > div:nth-child(1) {
  width: 55%;
}

.blac_list > div > div:nth-child(1) span {
  margin: 0 1px;
}

.blac_list > div > div:nth-child(1) > span:nth-child(1) {
  font-size: 30px;
  cursor: pointer;
  background-image: -webkit-linear-gradient(bottom, #FFD7D5, #FFFFFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

.blac_list > div > div:nth-child(1) > span:nth-child(3) {
  width: 60px;
  display: inline-block;
  background-image: url(../../../../assets/static/cardDetail/i2.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffb400;
  line-height: 19px;
  text-align: center;
  font-size: 11px !important;
}

.blac_list > div > div:nth-child(2) {
  width: 5%;
  font-size: 10px;
  text-align: center;
}

.blac_list > div > div:nth-child(2) > span {
  font-size: 20px;
  color: #63BD1F;
}

.blac_list > div > div:nth-child(3) {
  width: 15%;
  position: relative;
  font-size: 10px;
}

.blac_list > div > div:nth-child(3) img {
  width: 100%;
}

.blac_list > div > div:nth-child(3) span {
  position: absolute;
  top: 28%;
  left: 0;
  width: 100%;
  text-align: center;
}
</style>
